@use "@/assets/styles/mixin";

.rectification-container {
  background: #F5F7FA;
  height: calc(100% - 60px);
}

.construction-log {
  height: calc(100% - 72px);
  flex: 1;
  overflow-y: auto;
  //margin-top: 20px;
  //padding-top:5px ;
  padding: 20px 20px 0px;
}

.time-line {
  margin-left: 117px;
}

.list-title {
  @include mixin.flex-align;
  margin-bottom: 8px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 24px;

  &-name {
    margin-left: 10px;
    font-weight: 400;
    font-size: 14px;
    color: #3D3D3D;
  }

  &-role {
    font-size: 12px;
    color: #86909C;
  }
}

.list-desc {
  background-color: #ffffff;
  border-radius: 4px;

  &-header {
    padding: 15px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #DCDFE6;
    font-size: 14px;
    line-height: 20px;

    .type-label,
    .plain-duration,
    .plan-time {
      color: #3D3D3D;
    }

    .type-value {
      cursor: pointer;

      &-active {
        color: #007DFF;
        text-decoration: underline;
      }
    }

    .delay-days {
      color: #FF3333;
    }
    &-left{
      @include mixin.flex-align;
    }
  }

  &-content {
    padding: 5px 20px 20px;
    box-sizing: border-box;
    margin-bottom: 4px;
    font-size: 14px;
    color: #3d3d3d;
    line-height: 24px;

    .el-col{
      span{
        display: block;
        margin-top: 15px;
        text{
          color: #007DFF;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
    .type-tag {
      @include mixin.flex-inline-flex;
      width: 64px;
      height: 24px;
      background-color: #FFF1E9;
      border-radius: 3px;
      border: 1px solid #EA924C;
      font-size: 12px;
      color: #E37318;
      line-height: 20px;
    }
  }

  &-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    grid-gap: 10px;
    padding: 0 20px 10px;
    box-sizing: border-box;
    margin: 10px 0 8px;

    :deep(.el-image),
    video {
      width: 100%;
      height: 80px;
      border-radius: 4px;
    }

    .video-box {
      position: relative;

      :deep(.svg-icon) {
        @include mixin.position-center;
        z-index: 9;
        font-size: 29px;
      }

      video {
        object-fit: cover;
      }
    }

  }

  &-name {
    font-size: 12px;
    color: #86909c;
    line-height: 24px;
  }
}

.options-button {
  @include mixin.flex-between;

  &-show {
    @include mixin.flex-align;
    font-size: 12px;
    color: #86909C;
    line-height: 17px;

    .circle {
      width: 8px;
      height: 8px;
      margin: 0 5px 0 8px;
      background-color: #0AC905;
      border-radius: 50%;
    }
  }

  :deep(.el-button) {
    margin-left: auto;
  }
}

//左侧时间
.time {
  color: #409eff;
  position: absolute;
  left: -118px;
  top: 1px;

  .year {
    font-size: 16px;
    font-weight: 400;
    color: rgba(0,0,0,0.6);
  }

  .day {
    @include mixin.flex-align;
    justify-content: flex-end;
    width: 100%;
    font-size: 12px;
    font-weight: 400;
    color: #596878;
    text-align: right;
    margin-top: 10px;

    span {
      margin-left: 4px;
    }
  }
}

:deep(.el-empty) {
  @include mixin.position-center;
}

.client-follow-drawer {
  :deep(.el-drawer) {
    width: 600px !important;
    border-radius: 20px 0 0 20px;
  }

  :deep(.el-drawer__body) {
    padding: 0;
  }

  .stage-follow-up {
    width: 100%;
    height: 100%;
    padding: 24px 20px;
    box-sizing: border-box;
  }

  .stage-follow-up {
    @include mixin.flex-column;

    :deep(.el-timeline) {
      @include mixin.flex-overflow;
      padding-left: 0;
      margin-top: 24px;
    }

    :deep(.el-timeline-item__node--normal) {
      width: 6px;
      height: 6px;
      left: 2px;
    }

    .hide-left-line {
      :deep(.el-timeline-item > .el-timeline-item__tail) {
        border-left: none !important;
      }
    }

    .timeline-date {
      @include mixin.flex-align;

      .date {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.6);
        line-height: 24px;
      }

      .time {
        @include mixin.flex-align;
        font-size: 12px;
        color: #86909C;
        line-height: 24px;

        .el-icon {
          margin: 0 4px 0 8px;
        }
      }
    }

    .timeline {
      &-title {
        margin: 4px 0 10px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.9);
        line-height: 24px;
      }

      &-desc {
        padding: 10px;
        box-sizing: border-box;
        background-color: #f2f3f5;
        border-radius: 4px;

        &-content {
          margin-bottom: 4px;
          font-size: 14px;
          color: #3d3d3d;
          line-height: 24px;
        }

        &-images {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
          grid-gap: 10px;
          margin: 10px 0 20px;

          :deep(.el-image) {
            width: 100%;
            height: 80px;
            border-radius: 4px;
          }
        }

        &-name {
          font-size: 12px;
          color: #86909c;
          line-height: 24px;
        }
      }
    }

    .add-follow-up {
      @include mixin.flex-center();
      flex-direction: column;
      width: 100px;
      height: 100px;
      cursor: pointer;
      margin: 8px 8px 8px 0;
      border: 1px solid #cdd0d6;
      background-color: #fafafa;

      :deep(.el-icon) {
        font-size: 28px;
        color: #909399;
      }

      span {
        margin-top: 10px;
        font-size: 12px;
        color: #86909C;
        line-height: 24px;
      }
    }
  }
}

.content {
  @include mixin.flex;
  flex: 1;
  overflow-y: auto;

  &-tasks {
    @include mixin.flex-column;
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
    box-sizing: border-box;

    &-list {
      flex: 1;
      overflow-y: auto;
      position: relative;

      &-item {
        padding: 0 20px;
        box-sizing: border-box;
        border-radius: 4px;
        background-color: #F5F7FA;

        & + .content-tasks-list-item {
          margin-top: 20px;
        }
      }

      .list-item-options {
        @include mixin.flex-align;
        padding: 14px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #E2E8F0;

        &-icon {
          width: 4px;
          height: 16px;
          background-color: #007DFF;
          border-radius: 2px;
        }

        &-type {
          font-size: 16px;
          color: #FF3333;
          line-height: 24px;
        }

        &-label {
          margin-left: 10px;
          font-size: 16px;
          color: #3D3D3D;
          line-height: 24px;
        }

        :deep(.el-button) {
          margin-left: auto;
        }
      }

      .list-item-info {
        @include mixin.flex-between;
        align-items: center;
        padding: 20px 0;
        box-sizing: border-box;

        &-item {
          @include mixin.flex-center(space-between);
          font-size: 14px;
          color: #3D3D3D;
          line-height: 22px;

          span {
            color: #86909C;
          }
        }
      }
    }
  }
}


// 申请标准
.application-dialog {
  :deep(.el-form) {
    margin-top: 24px;
  }

  :deep(.el-input.is-disabled .el-input__wrapper),
  :deep(.el-textarea.is-disabled .el-textarea__inner) {
    border: 1px solid #F2F3F5;
    box-shadow: none;
    background-color: #fff !important;
    color: #3D3D3D;
  }

  .el-input.is-disabled :deep(.el-input__inner) {
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    font-size: 14px;
    line-height: 22px;
  }
}

// tabs样式
.template-button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 20px;
  background: #ffffff;
  box-shadow: 4px 5px 4px 0px rgba(4, 19, 74, 0.04);

  .button {
    width: 112px;
    height: 32px;
    color: #4e5969;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    line-height: 32px;
    border: 1px solid #e1e6ed;
    cursor: pointer;
  }

  .button:nth-of-type(1) {
    border-radius: 3px 0px 0px 3px;
  }

  .button:nth-of-type(2) {
    border-radius: 0px 3px 3px 0px;
  }

  .active {
    color: #007dff;
    border: 1px solid #007dff;
  }
}
.divider-grey{
  width: 4px;
  height: 20px;
  background: #DCDFE6;
  border-radius: 2px 2px 2px 2px;
  margin: 0 20px;
}
.contract-materials-buttons{
  @include mixin.flex-center(space-between);
  font-size: 14px;
  color: #007DFF;
  cursor:pointer;
}
.ellipsis{
  overflow:hidden;/*内容超出后隐藏*/
  text-overflow:ellipsis;/*超出内容显示为省略号*/
  white-space:nowrap;/*文本不进行换行*/
}
.ellipsis-clamp3 {
  display: -webkit-box!important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
/* 作废 */
.delete-dialog {
  :deep(.el-select__wrapper) {
    background: #F2F3F5 !important;
  }

  :deep(.el-dialog) {
    margin-top: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 4px 25px 0px rgba(4, 19, 74, 0.3);
    border-radius: 10px 10px 10px 10px;
    padding: 40px 30px;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 500;
    }

    .el-dialog__body {
      text-align: center !important;
    }

    .el-dialog__footer {
      margin-top: 20px !important;
      text-align: center!important;
      .el-button {
        width: 92px;
        height: 36px;
      }
    }
  }
}